<template>
  <div class="main">
    <div class="body">
      <div class="view" v-html="query.content"></div>
      <el-button class="btn" @click="add">add</el-button>
      <TextEditor v-model="query.content" />
    </div>
  </div>
</template>

<script setup>
import { addOrUpdateWelcomeService, getMyWelcomeInfoService } from '@/api/Console'
import TextEditor from '@/components/TextEditor.vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const query = ref({
  content: '',
})

const add = () => {
  if (query.value.content === '<p><br></p>') {
    ElMessage.error('内容不能为空')
    return false
  }
  addOrUpdateWelcomeService(query.value).then(() => {
    router.push('/home')
  })
}

/**
 * 初始化数据
 */
const getWelcomeWordInfo = async () => {
  await getMyWelcomeInfoService().then(({ data }) => {
    query.value.content = data.content
  })
}

onMounted(() => {
  getWelcomeWordInfo()
})
</script>

<style lang="scss" scoped>
* {
  border: none !important;
}
.main {
  padding: 15px;
  background-color: #f3f4f5;

  .body {
    min-height: 100vh;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;
    position: relative;

    .btn {
      position: absolute;
      top: 130px;
      right: 50px;
      border: none;
      background-color: #89d1e7;
      color: #000;
    }

    .view {
      min-height: 20vh;
      padding: 15px;
      background-color: #cfe8e9b4;
      border-radius: 10px;
    }
  }
}
</style>